<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="warning-container">
    <div class="main-container">
      <img class="icon-warning" src="../../../assets/png/alert-triangle.png" />
      <span class="main-title">
        <span class="title">最新告警</span>
        <span
          class="number-container"
          v-if="data.warningList?.length"
        >{{data.warningList?.length || 0}}</span>
      </span>
      <img class="icon-arrow" @click="handleVisible" src="../../../assets/png/arrow-down.png" />
    </div>
    <!-- visible -->
    <div class="warning-list" v-if="data.visible">
      <div class="item-warning" v-for="(item,index) in data.warningList" :key="index">
        <div class="item-top">
          <span class="item-value name">{{item.camera_position}}-{{item.camera_name}}</span>
          <span class="item-value action" @click="handleWatch(item)">查看</span>
        </div>
        <div class="item-bottom">
          <span class="item-value type">{{item.check_type}}</span>
          <span class="item-value time">{{item.time}}</span>
        </div>
      </div>
    </div>
  </div>

  <el-dialog v-model="data.dialogVisible" title="告警详情" width="908px">
    <div class="dialog-content">
      <div class="title">
        <img src="../../../assets/png/Warning.png" alt srcset />
        <span class="camera">{{data.singleData.camera_name}}-{{data.singleData.camera_position}}</span>
        <span class="type">{{data.singleData.check_type}}</span>
        <span class="time">{{data.singleData.time}}</span>
      </div>
      <div class="body" @mouseenter="mouseenter" @mouseleave="mouseleave">
        <img :src="data.singleData.image" />
        <div class="dialog-action" v-if="data.mouseHover">
          <span class="icon-container" @click="downloadVideo">
            <img src="../../../assets/png/video-download.png" alt srcset />
          </span>
          <span class="icon-container" @click="downloadImage">
            <img src="../../../assets/png/image-download.png" alt />
          </span>
        </div>
      </div>
      <div class="footer">
        <span class="sub-title">处理意见</span>
        <el-input v-model="data.suggestion" placeholder="可以在这里填写处理方意见或方式（选填）"></el-input>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">暂不处理</el-button>
        <el-button type="primary" @click="handleCommit">确认处理</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, watch, defineProps } from "vue";
const props = defineProps(["data"]);

const data = reactive({
  warningList: [1],
  visible: false,
  dialogVisible: false,
  singleData: {},
  mouseHover: false
});
watch(
  () => props.data,
  curr => {
    data.warningList = curr;
  }
);
const downloadImage = () => {
  fetch(data.singleData.image) //使用fetch函数发送一个GET请求到指定的URL，获取文件的响应对象。
    .then(response => response.blob()) //通过.then方法链，将响应对象转换为Blob数据（文件的二进制数据）。
    .then(blob => {
      //再次使用.then方法链，处理获取到的Blob数据。
      const link = document.createElement("a"); //使用document.createElement创建一个<a>节点。
      link.href = URL.createObjectURL(blob); //通过URL.createObjectURL方法，将Blob数据转换成URL对象，然后将该URL赋值给link的href属性。这一步相当于生成了一个临时URL，供下载使用。
      link.download = "告警图片"; // 替换为你要保存的文件名和扩展名(设置用户下载文件时使用的文件名和扩展名)
      link.click(); //调用click方法模拟用户点击链接，从而触发浏览器的文件下载行为。

      URL.revokeObjectURL(link.href); // 释放URL对象资源(使用URL.revokeObjectURL方法释放之前创建的URL对象资源，避免内存泄漏)
    })
    .catch(error => {
      console.error("下载失败:", error);
    });
};
const downloadVideo = () => {
  fetch(data.singleData.video)
    .then(res => res.blob())
    .then(blob => {
      const a = document.createElement("a");
      const objectUrl = window.URL.createObjectURL(blob);
      a.download = name;
      a.href = objectUrl;
      a.click();
      window.URL.revokeObjectURL(objectUrl);
      a.remove();
    });
};
const mouseenter = () => {
  data.mouseHover = true;
};
const mouseleave = () => {
  data.mouseHover = false;
};
const handleWatch = param => {
  data.dialogVisible = true;
  data.singleData = param;
};
const handleCancel = () => {
  data.dialogVisible = false;
};
const handleVisible = () => {
  data.visible = !data.visible;
};
const handleCommit = () => {
  data.visible = !data.visible;
};
</script>

<style lang="less">
.warning-container {
  position: absolute;
  top: 0;
  right: -8px;
  width: 268px;
  max-height: 520px;
  overflow: hidden;
  background: #f0f6fc;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  .main-container {
    width: 244px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    .icon-warning {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
    .main-title {
      flex: 1;
      display: flex;
      align-items: center;
      .title {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ff6e00;
        line-height: 20px;
      }
      .number-container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        width: 16px;
        height: 16px;
        background: #ee0a24;
        border-radius: 16px;
        border: 1px solid #ffffff;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .icon-arrow {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
  .warning-list {
    flex: 1;
    overflow: auto;
    width: 244px;
    margin-top: 12px;
    .item-warning {
      height: 58px;
      padding: 8px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .item-top,
      .item-bottom {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
      }
      .item-top {
        margin-bottom: 8px;
        .name {
          flex: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.88);
        }
        .action {
          cursor: pointer;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #1890ff;
          line-height: 17px;
        }
      }
      .item-bottom {
        .type {
          flex: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
        .time {
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }
}
.dialog-content {
  .title {
    padding: 0 13px;
    height: 40px;
    background: #ffece8;
    border-radius: 8px;
    border: 1px solid #ffccc7;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    img {
      width: 14px;
      height: 14px;
      margin-right: 9px;
    }
    .camera {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }
    .type {
      flex: 1;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    .time {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .body {
    width: 860px;
    // height: 645px;
    position: relative;
    margin-bottom: 16px;
    img {
      width: 100%;
    }
    .dialog-action {
      display: inline-flex;
      position: absolute;
      right: 16px;
      bottom: 16px;
      .icon-container {
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        img {
          width: 24px;
        }
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    .sub-title {
      word-break: keep-all;
      margin-right: 16px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
    }
  }
}
</style>